<template>
    <div class="tag-box">
        <el-row v-for="tag in tagBo" class="tag-line">
            <el-link @click="goToTagList(tag.id)">{{tag.tagName}}</el-link>
        </el-row>
    </div>
</template>

<script>

    import tagApi from "@/api/tag"

    export default {
        name: "blog-tag",
        data(){
            return {
                tagBo: [{
                    id: null,
                    tagName: "",
                    blogList: [],
                }]
            }
        },

        created() {
            this.getTagList();
        },

        watch: {
            '$route' (to, from) {
                this.$router.go(0);
            }
        },

        methods: {
            getTagList: function () {
                tagApi.getTagList().then(response => {
                    const resp = response.data;
                    this.tagBo = resp.data;
                })
            },

            goToTagList: function (id) {
                this.$router.push("/index/blog-tag/" + id);
            }
        },


    }
</script>

<style scoped>

    div.tag-box {
        width: 100%;
    }

    .tag-line {
        padding-bottom: 16px;
    }

</style>
